<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大数据展示</title>
    <link href="css/webDsj.css" rel="stylesheet" type="text/css">
    <script src="js/echarts.js"></script>
    <script src="js/jquery.min.js" rel="script"></script>
    <script src="js/shandong.js"></script>
</head>
<body>
<div class="web_top">
    <h2>医养平台大数据可视化</h2>
</div>
<div class="web_content">
    <div class="left clear_box">
        <a class="a_back">医养及家政数据对比</a>
        <div class="web_count clear_box div">
            <div id="echart03" style="width: 50%;height:270px;float:left"></div>
            <div id="echart08" style="width: 50%;height:270px;float:left"></div>
        </div>

        <a class="a_back">医养数据可视化</a>
        <div class="web_content_left clear_box div">
            <div id="echart01" style="width: 50%;height:270px;float:left"></div>
            <div id="echart02" style="width: 50%;height:270px;float:left"></div>
        </div>
    </div>
    <div class="content">
        <div class="mapDongYing">
            <a>东营市地域数据统计</a>
        </div>
        <div id="main" style="width: 480px;height: 500px;margin: 0 auto;"></div>
    </div>
    <div class="right">
        <a class="a_back">医养随访数据显示</a>
        <div class="right_top div">
            <div id="echart06" style="width: 100%;height:300px;float:left;padding-top: 5px;"></div>
        </div>
        <a class="a_back">医养所属人群占比</a>
        <div class="right_bottom div">
            <div id="echart07" style="width: 100%;height:210px;float:left;padding-top: 5px;"></div>
        </div>
    </div>
</div>
<div class="bottom clear_box">
    <div class="bottom_left_box">
        <a class="a_back">纳入医养数据变化趋势</a>
        <div class="bottom_left div clear_box">
            <div id="echart04" style="width: 100%;height:270px;float:left;padding-top: 5px;"></div>
        </div>
    </div>
    <div class="bottom_cont_box">
        <a class="a_back">医养老年人男女比例</a>
        <div class="bottom_cont div clear_box">
            <div id="echart05" style="width: 100%;height:270px;float:left;padding-top: 5px;"></div>
        </div>
    </div>
    <div class="bottom_right_box">
        <a class="a_back">医养通话记录显示</a>
        <div class="bottom_right div clear_box">
            <div class="bottom_right_top clear_box">
                <a class="a_one">序号</a><a class="a_two">号码</a><a class="a_three">机构</a><a class="a_four">时间区间</a>
            </div>
            <div class="bottom_right_bottom">
                <ul>
                    <li>
                        <a class="a_one">01</a><a class="a_two">182****1545</a><a class="a_three">河岸社区</a>
                        <a class="a_four">2019-11-24 12:20:52 - 2019-11-24 12:20:52</a>
                    </li>
                    <li>
                        <a class="a_one">02</a><a class="a_two">182****1545</a><a class="a_three">河岸社区</a>
                        <a class="a_four">2019-11-24 12:20:52 - 2019-11-24 12:20:52</a>
                    </li>
                    <li>
                        <a class="a_one">03</a><a class="a_two">182****1545</a><a class="a_three">河岸社区</a>
                        <a class="a_four">2019-11-24 12:20:52 - 2019-11-24 12:20:52</a>
                    </li>
                    <li>
                        <a class="a_one">04</a><a class="a_two">182****1545</a><a class="a_three">河岸社区</a>
                        <a class="a_four">2019-11-24 12:20:52 - 2019-11-24 12:20:52</a>
                    </li>
                    <li>
                        <a class="a_one">05</a><a class="a_two">182****1545</a><a class="a_three">河岸社区</a>
                        <a class="a_four">2019-11-24 12:20:52 - 2019-11-24 12:20:52</a>
                    </li>
                    <li>
                        <a class="a_one">06</a><a class="a_two">182****1545</a><a class="a_three">河岸社区</a>
                        <a class="a_four">2019-11-24 12:20:52 - 2019-11-24 12:20:52</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('echart01'));
    var myChart02 = echarts.init(document.getElementById('echart02'));
    var myChart03 = echarts.init(document.getElementById('echart03'));
    var myChart04 = echarts.init(document.getElementById('echart04'));
    var myChart05 = echarts.init(document.getElementById('echart05'));
    var myChart06 = echarts.init(document.getElementById('echart06'));
    var myChart07 = echarts.init(document.getElementById('echart07'));
    var myChart08 = echarts.init(document.getElementById('echart08'));
    var option = {
        title:{
            show:true,
            text:"医养处理数据显示",
            textStyle:{
                color:"#FFF",
            },
            left: 'center',
            top:10
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            bottom: '2%',
            orient: "horizontal",
            itemGap:10,
            itemWidth:20,
            data:['家医处理','转上级医院','120处理'],//'直接访问','邮件营销','联盟广告','视频广告','搜索引擎'
            textStyle:{
                color:"#FFF"
            }
        },
        color : [ '#eb6f49', '#67e0e3', '#fdb628' ],
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'家医处理'},
                    {value:310, name:'转上级医院'},
                    {value:234, name:'120处理'},
                ]
            }
        ]
    };
    var option02 = {
        title:{
            show:true,
            text:"医养年龄占比",
            textStyle:{
                color:"#FFF",
            },
            left: 'center',
            top:10
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            bottom: '2%',
            orient: "horizontal",
            itemGap:10,
            itemWidth:20,
            data:['60-70','70-80','80以上'],//'直接访问','邮件营销','联盟广告','视频广告','搜索引擎'
            textStyle:{
                color:"#FFF"
            }
        },
        color : [ '#eb6f49', '#67e0e3', '#fdb628' ],
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:200, name:'60-70'},
                    {value:600, name:'70-80'},
                    {value:234, name:'80以上'},
                ],

            }
        ]
    };

    var  option03 = {
        title:{
            show:true,
            text:"医养服务次数",
            textStyle:{
                color:"#FFF",
            },
            left: 'center',
            top:10
        },
        legend: {
            top: '2%',
            orient: "horizontal",
            itemGap:10,
            itemWidth:20,
            data:['家医处理','转上级医院'],
            textStyle:{
                color:"#FFF"
            }
        },
        series: [
            {
                type: 'pie',
                label: {
                    show: true,

                },
                center: ['50%', '50%'],
                radius: ['50%', '70%'],
                startAngle: 180,
                labelLine: {
                    normal: {
                        show: true,
                        length: 5,//分支长度
                        length2:5,

                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [
                    {
                        name: '家政',
                        value: 25,
                        itemStyle: {
                            color: '#ff9900'
                        }
                    },
                    {
                        name: '医养',// 实际显示部分是总量-用量
                        value: 75,
                        itemStyle: {
                            color: 'skyblue'
                        }
                    },
                    {
                        name: 'bottom',
                        value: 100,
                        itemStyle: {
                            color: 'transparent'
                        }
                    },
                ]
            }
        ]
    };

    var option04 = {
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data:['纳入医养'],
            textStyle:{
                color:"#FFF"
            }
        },

        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        axisLabel:{
            color:"#FFF"
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['5月','6月','7月','8月','9月','10月','11月'],
                areaStyle:{
                    color:"#FFF"
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:"#6666"
                    }
                },
            }
        ],

        series : [
            {
                name:'纳入医养',
                type:'line',
                smooth:true,
                stack: '总数',
                areaStyle: {
                    background:"#45969d"
                },
                data:[120, 132, 101, 134, 90, 230, 210]
            }
        ]
    };

    var option05 = {
        tooltip: {},
        color: ['#4F9AFF', '#5ADBDC'],
        title: {
            text: '总人数',
            // subtext: 7789,
            subtext: 1772,
            textStyle: {
                color: '#f2f2f2',
                fontSize: 13,
                top: '10px'
                // align: 'center'
            },
            subtextStyle: {
                fontSize: 20,
                color: ['#ff9d19'],
                fontWeight: 800
            },
            x: 'center',
            y: 'center'
        },
        grid: {
            bottom: 150,
            left: 100,
            right: '10%'
        },
        series: [
            // 主要展示层的
            {
                radius: ['40%', '81%'],
                center: ['50%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}{d}%',
                        textStyle: {
                            fontSize: 14
                        },
                        //position:['50%','50%'],// 'outside',
                        top:10
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 5,//分支长度
                        length2:5,

                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [
                    {
                        name: '男',
                        value: 1000
                    },
                    {
                        name: '女',
                        value: 600
                    }
                ]
            },
            // 边框的设置
            {
                radius: ['40%', '44%'],
                center: ['50%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                animation: false,
                tooltip: {
                    show: false
                },
                data: [
                    {
                        value: 1,
                        itemStyle: {
                            color: 'rgba(250,250,250,0.3)'
                        }
                    }
                ]
            },
            {
                name: '外边框',
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['50%', '50%'],
                radius: ['65%', '65%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: '',
                        name: '',
                        itemStyle: {
                            normal: {
                                borderWidth: 2,
                                borderColor: '#0b5263'
                            }
                        }
                    }
                ]
            }
        ]
    }

    var option06 = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['5月', '6月', '7月', '8月', '9月', '10月', '11月'],
                axisLine: {//这是y轴文字颜色
                    lineStyle: {
                        color: "#FFF",
                    }
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:"#6666"
                    }
                },
                axisTick: {
                    alignWithLabel: true
                }

            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLine: {//这是y轴文字颜色
                    lineStyle: {
                        color: "#FFF",
                    }
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:"#6666"
                    }
                },
            }
        ],
        series : [
            {
                name:'随访数',
                type:'bar',
                barWidth: '60%',
                data:[200, 300, 200, 334, 390, 330, 400]
            }
        ]
    };
    var option07 =  {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['老年人', '残疾人','高血糖','高血压','正常人'],
            textStyle:{
                color:"#FFF"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value',
            axisLine: {//这是y轴文字颜色
                lineStyle: {
                    color: "#FFF",
                }
            },
        },
        yAxis: {
            type: 'category',
            data: ['9月','10月','11月'],
            axisLine: {//这是y轴文字颜色
                lineStyle: {
                    color: "#FFF",
                }
            },
        },
        series: [
            {
                name: '老年人',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [320, 302, 301]
            },
            {
                name: '残疾人',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [120, 132, 101]
            },
            {
                name: '高血糖',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [220, 182, 191]
            },
            {
                name: '高血压',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [150, 212, 201]
            },
            {
                name: '正常人',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [820, 832, 901]
            }
        ]
    };
    var  option08 = {
        title:{
            show:true,
            text:"医养服务次数",
            textStyle:{
                color:"#FFF",
            },
            left: 'center',
            top:10
        },
        legend: {
            top: '2%',
            orient: "horizontal",
            itemGap:10,
            itemWidth:20,
            data:['家医处理','转上级医院'],
            textStyle:{
                color:"#FFF"
            }
        },
        series: [
            {
                type: 'pie',
                label: {
                    show: true,

                },
                center: ['50%', '50%'],
                radius: ['50%', '70%'],
                startAngle: 180,
                labelLine: {
                    normal: {
                        show: true,
                        length: 5,//分支长度
                        length2:5,

                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [
                    {
                        name: '家政',
                        value: 25,
                        itemStyle: {
                            color: '#ff9900'
                        }
                    },
                    {
                        name: '医养',// 实际显示部分是总量-用量
                        value: 75,
                        itemStyle: {
                            color: 'skyblue'
                        }
                    },
                    {
                        name: 'bottom',
                        value: 100,
                        itemStyle: {
                            color: 'transparent'
                        }
                    },
                ]
            }
        ]
    };

    myChart.setOption(option);
    myChart02.setOption(option02);
    myChart03.setOption(option03);
    myChart04.setOption(option04);
    myChart05.setOption(option05);
    myChart06.setOption(option06);
    myChart07.setOption(option07);
    myChart08.setOption(option08);

</script>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    $(document).ready(function() {
        var dataList= [
            {name: '新户乡', value: 3000},//randomValue()
            {name: '太平乡', value: 2000},
            {name: '湾湾沟乡', value: 4000},
            {name: '河口区', value: 5000},
            {name: '孤岛镇', value: 1000},
            {name: '仙河镇', value: 2000}
        ]
        function randomValue() {
            return Math.round(Math.random()*1000);
        }
        $.get('js/370503.Json', function (geoJson) {

            myChart.hideLoading();
            //console.log(geoJson)
            echarts.registerMap('河口', geoJson);

            myChart.setOption(option = {
                // tooltip: {
                //     trigger: 'item',
                //     formatter: '{b}<br/>{c}'
                // },
                tooltip: {
                    formatter:function(params){
                        return '纳入医养总人数统计'+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 800,
                    max: 5000,
                    text: ['High', 'Low'],
                    textStyle:{
                        color:"#FFF"
                    },
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [
                    {
                        type: 'map',
                        mapType: '河口', // 自定义扩展图表类型
                        itemStyle: {
                            normal: {label: {show: true}},
                            emphasis: {label: {show: true}}
                        },
                        data:dataList,
                        // 自定义名称映射
                        // nameMap: {
                        //     'Central and Western': '中西区',
                        //     'Eastern': '东区',
                        //     'Islands': '离岛',
                        //     'Kowloon City': '九龙城',
                        //     'Kwai Tsing': '葵青',
                        //     'Kwun Tong': '观塘',
                        //     'North': '北区',
                        //     'Sai Kung': '西贡',
                        //     'Sha Tin': '沙田',
                        //     'Sham Shui Po': '深水埗',
                        //     'Southern': '南区',
                        //     'Tai Po': '大埔',
                        //     'Tsuen Wan': '荃湾',
                        //     'Tuen Mun': '屯门',
                        //     'Wan Chai': '湾仔',
                        //     'Wong Tai Sin': '黄大仙',
                        //     'Yau Tsim Mong': '油尖旺',
                        //     'Yuen Long': '元朗'
                        // }
                    }
                ]
            });
        })
    })
</script>
</body>
</html>